前面講到了 Ajax 用 get 的方法來撈取資料，這篇來介紹 post 的方法來傳送資料

以下是 HTML 結構:

帳號:
<input type="email" name="account" id="account">
<br>
密碼:
<input type="password" name="password" id="password">
<br>
<button id="btn">送出</button>

接下來針對每個 DOM 元素來做選取:

let account = document.querySelector('#account');
let password = document.querySelector('#password');
let btn = document.querySelector('#btn');

為按鈕綁上監聽:

btn.addEventListener('click',submit);

監聽的 function:

function submit(){
            // 針對 api 要寫入的格式，把 HTML　撈取回來的　value 寫成物件
            let accountItem = {
                email: account.value,
                password: password.value
            };
            
            // 接著新增一個 XMLHttpRequest()
            const xhr = new XMLHttpRequest();
            
            // 接著使用 open()，第一個參數改為 post
            xhr.open('post','https://hexschool-tutorial.herokuapp.com/api/signup',true);
            
            // 不同於 get，post 在傳送前要先設定傳送資料的格式，我要傳過去的是 JSON 格式
            xhr.setRequestHeader('Content-type','application/json');
            
            // 接著須將 JSON 格式轉為字串，再傳送過去 api
            const data = JSON.stringify(accountItem);
            
            // 接著傳送過去
            xhr.send(data);
            
            // 等待資料確定傳送過去時觸發 onload function
            xhr.onload = function(){
                // 把 responseText 的文字轉為 JSON 格式
                const str = JSON.parse(xhr.responseText);
                
                // 取我們要的屬性，用來判斷
                const data = str.message;
                
                // 以下就是簡單的小判斷
                if(data == '帳號註冊成功'){
                    alert('帳號註冊成功');
                }else{
                    alert('帳號註冊失敗');
                }
            }
        }

上面就是 post 的作法